<!-- <mat-slider min="1" max="100" step="1" value="1"></mat-slider> -->
<!-- <mat-drawer-container class="example-container" autosize> -->
<div class="header">
  <mat-card class="card" *ngIf="dataHigh;let element">
    <mat-card-header>
      <mat-card-title>今日高光图</mat-card-title>
      <mat-card-subtitle>Highlighted Map</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <div class="content">
        <img class="map-img" [defaultImage]="defaultImage" [lazyLoad]="getRealUrl(element['mapImgUrl'])"
          alt="淦，官网图片挂逼了">
        <div class="right">
          <p>
            <a [href]="element['mapUrl']">{{element["mapName"]}}</a>
            by
            <a [href]="element['mapAuthorUrl']">{{element["mapAuthor"]}}</a>
          </p>
          <div *ngIf="element['description']" class="des">
            <p>{{element['description']}}</p>
          </div>
          <!-- <div class="des">
            <p>fuck</p>
            <p>fuck</p>
            <p>fuck</p>
            <p>fuck</p>
          </div> -->
          <div class="get-id">
            <mat-form-field>
              <input class="map-id" matInput type="text" [(ngModel)]="element.mapId">
            </mat-form-field>
          </div>
        </div>
      </div>
    </mat-card-content>
  </mat-card>
</div>
<mat-tab-group class="daily" (selectedTabChange)="setShowBigTab($event)">
  <mat-tab *ngFor="let item of data" label="{{item.name}}">
    <mat-tab-group *ngIf="item.show" (selectedTabChange)="setShowTab($event)">
      <mat-tab *ngFor="let _item of item.data" label="{{_item.name}}">
        <div class="table-wrapper">
          <table *ngIf="_item.show" mat-table [dataSource]="_item.data" class="mat-elevation-z8 table">
            <ng-container matColumnDef="id" sticky>
              <th width="30px" mat-header-cell *matHeaderCellDef> 排名 </th>
              <td mat-cell *matCellDef="let element"> {{element.id}} </td>
            </ng-container>
            <ng-container matColumnDef="mapName">
              <th width="200px" mat-header-cell *matHeaderCellDef> 地图名 </th>
              <td mat-cell *matCellDef="let element"> {{element.mapName}} </td>
            </ng-container>
            <ng-container matColumnDef="description">
              <th mat-header-cell *matHeaderCellDef> 描述 </th>
              <td mat-cell *matCellDef="let element"> {{element.description}} </td>
            </ng-container>

            <ng-container matColumnDef="mapAuthor">
              <th width="100px" mat-header-cell *matHeaderCellDef> 地图作者 </th>
              <td mat-cell *matCellDef="let element">
                <a target="_blank" [href]="getRealUrl(element.mapAuthorUrl)"> {{element.mapAuthor}} </a>
              </td>
            </ng-container>
            <ng-container matColumnDef="mapAuthorUrl">
              <th mat-header-cell *matHeaderCellDef> 地图作者地址 </th>
              <td mat-cell *matCellDef="let element"> {{element.mapAuthorUrl}} </td>
            </ng-container>
            <ng-container matColumnDef="mapId" [sticky]="false">
              <th mat-header-cell *matHeaderCellDef> 地图ID </th>
              <td mat-cell *matCellDef="let element">
                <mat-form-field>
                  <input class="map-id" matInput type="text" [(ngModel)]="element.mapId">
                </mat-form-field>
                <!-- <input matInput type="text" (ngModel)="element.mapId"> -->
              </td>
            </ng-container>
            <ng-container matColumnDef="mapImgUrl">
              <th width="200px" mat-header-cell *matHeaderCellDef> 地图预览图 </th>
              <td mat-cell *matCellDef="let element">
                <div class="map-img">
                  <span *ngIf="!element.mapImgUrl">作者没上传预览图</span>
                  <img *ngIf="element.mapImgUrl" [defaultImage]="defaultImage"
                    [lazyLoad]="getRealUrl(element.mapImgUrl)" alt="淦，官网图片挂逼了">
                </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="mapRate">
              <th width="80px" mat-header-cell *matHeaderCellDef> 地图评分 </th>
              <td mat-cell *matCellDef="let element"> {{element.mapRate}} </td>
            </ng-container>
            <ng-container matColumnDef="mapApprove">
              <th width="48px" mat-header-cell *matHeaderCellDef> Ranked </th>
              <td mat-cell *matCellDef="let element">
                <ng-container *ngIf="element.mapApprove">
                  <mat-icon>done</mat-icon>
                </ng-container>
                <ng-container *ngIf="!element.mapApprove">
                  <mat-icon>clear</mat-icon>
                </ng-container>
              </td>
            </ng-container>
            <ng-container matColumnDef="mapUrl">
              <th mat-header-cell *matHeaderCellDef> 地图链接 </th>
              <td mat-cell *matCellDef="let element">
                <a target="_blank" [href]="getRealUrl(element.mapUrl)">
                  <mat-icon>link</mat-icon>
                </a>
              </td>
            </ng-container>


            <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky:true"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>
        </div>
      </mat-tab>
    </mat-tab-group>
  </mat-tab>
</mat-tab-group>
<div class="form">
  <p>{{message}}</p>
  <mat-form-field class="example-form-field">
    <mat-label>Password:</mat-label>
    <input matInput type="text" [(ngModel)]="password">
    <button mat-button *ngIf="password" matSuffix mat-icon-button aria-label="Clear" (click)="password=''">
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>
  <button mat-raised-button (click)="onClickFixButton($event)">执行</button>
  <mat-icon>{{icon}}</mat-icon>
</div>
<!-- <div class="fix-panel">
  <button mat-mini-fab aria-label="Example icon button with a home icon" (click)="onClickFixButton($event)">
    <mat-icon>menu</mat-icon>
  </button>
</div> -->
